<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 用户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="username"
                label="用户名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="date_joined"
                label="申请日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="email"
                label="邮箱">
                <template slot-scope="scope">
                    <p v-if="scope.row.email">{{ scope.row.email }}</p>
                    <p v-else>还未绑定邮箱</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号">
            </el-table-column>
            <el-table-column
                
                label="公司">
                <template slot-scope="scope">
                    <p v-if="scope.row.company">{{ scope.row.company }}</p>
                    <p v-else>还未绑定公司</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="permission"
                label="权限">
                <template slot-scope="scope">
                    <p v-if="scope.row.permission">{{ scope.row.permission }}</p>
                    <p v-else>还未绑定权限</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="permission"
                label="权限">
                <template slot-scope="scope">
                    <p v-if="scope.row.permission">{{ scope.row.permission }}</p>
                    <p v-else>还未绑定权限  
                         <el-button
                        @click="showLoing(scope.row.id)"
                        type="text"
                        size="small">
                        审批
                        </el-button>
                    </p>
                </template>
            </el-table-column>
            </el-table>
            <el-dialog
                title="审批用户"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                <!-- 公司 -->
                <el-select v-model="company" placeholder="请选择公司">
                    <el-option
                    v-for="item in cities"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.addr }}</span>
                    </el-option>
                </el-select>
                <!-- 权限 -->
                    <el-select v-model="permission" placeholder="请选择权限">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.permission"
                        :value="item.id">
                        </el-option>
                    </el-select>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="exam">确定</el-button>
                    <el-button  @click="dialogVisible = false">取消</el-button>
                </span>
                </el-dialog>
        </div>
    </div>
</template>

<script>
import {Get_Users,Change_Users} from '../../api/api.js'
    export default {
        name: 'tabs',
        data() {
            return {
                uid:localStorage.getItem('uid'),
                tableData:[],  //用户列表
                dialogVisible:false,   //是否显示弹框
                cities: [],   //公司
                options: [],  //权限
                company: '',  //公司选中
                permission:'', //权限选中
                user:'',   //选中的uid

            }
        },
        methods: {
            showLoing(id){
                this.user = id
                this.dialogVisible = true
            },
            exam(){
                let params = {
                    uid:this.user,
                    company_id:this.company,
                    permission_id:this.permission

                }
                Change_Users(params).then(res=>{
                    if(res.data.code == 200){
                        this.$message.success(res.data.message);
                        // this.dialogVisible = false
                        // this.$router.go(0)
                    }else{
                        this.$message.success(res.data.message);
                    }
                })
            },
        },
        computed: {
            
        },
        mounted(){
            let params = {
                uid:this.uid,
            }
            Get_Users(params).then(res=>{
                this.tableData = res.data.data
                this.cities = res.data.company
                this.options = res.data.permission
            })
        }
    }

</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
</style>

